<template>
  <div class="dash">
    <div class="dashboard">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-card class="card user" shadow="hover">
            <i class="el-icon-user card-icon"></i>
            <h3 class="card-item">平台用户</h3>
            <h5 class="card-desc">200</h5>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="card app" shadow="hover">
            <i class="el-icon-connection card-icon"></i>
            <h3 class="card-item">已接入公证处</h3>
            <h5 class="card-desc">20</h5>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="card channel" shadow="hover">
            <i class="el-icon-cpu card-icon"></i>
            <h3 class="card-item">已发布任务</h3>
            <h5 class="card-desc">1000</h5>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="card release" shadow="hover">
            <i class="el-icon-sell card-icon"></i>
            <h3 class="card-item">已审核任务</h3>
            <h5 class="card-desc">300</h5>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="dashboard-wrap">
      <h3 class="dashboard-wrap__title"><i class="dashboard-wrap__mark"></i>运营数据</h3>
      <div class="dashboard-charts">
        <el-row :gutter="10">
          <el-col :span="12">
            <chart-one></chart-one>
          </el-col>
          <el-col :span="12">
            <chart-two></chart-two>
          </el-col>
          <el-col :span="12">
            <chart-thr></chart-thr>
          </el-col>
          <el-col :span="12">
            <chart-four></chart-four>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch, onMounted } from 'vue';
import ChartOne from './components/chart-one.vue';
import ChartTwo from './components/chart-two.vue';
import ChartThr from './components/chart-thr.vue';
import ChartFour from './components/chart-four.vue';

export default defineComponent({
  name: 'dashboard',
  props: [],
  emits: [],
  components: { ChartOne, ChartTwo, ChartThr, ChartFour },
  setup(props, ctx) {
    return {};
  },
});
</script>

<style lang="scss" scoped>
.dashboard {
  @extend %container;
  margin-bottom: 10px;
  &-wrap {
    width: 100%;
    min-width: 600px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    &__title {
      font-size: 18px;
      font-weight: bold;
      line-height: 30px;
      color: #333333;
      border-bottom: #f0f0f0 solid 1px;
      padding-bottom: 10px;
      margin: 0;
    }
    &__mark {
      display: inline-block;
      width: 4px;
      height: 12px;
      background: #0052d9;
      margin-right: 10px;
    }
  }
  &-charts {
    width: 100%;
    padding-top: 10px;
  }
}
.el-row {
  .el-col {
    margin-bottom: 10px;
  }
  .card {
    position: relative;
    &-item {
      font-size: 20px;
      color: #ffffff;
      line-height: 30px;
      font-weight: bold;
      margin: 0;
    }
    &-desc {
      position: relative;
      color: #ffffff;
      font-size: 18px;
      line-height: 30px;
      text-align: right;
      z-index: 1;
      font-weight: bold;
      margin: 0;
    }
    &-icon {
      font-size: 100px;
      color: #ffffff;
      position: absolute;
      right: 0px;
      top: 0px;
      transform: rotate(-45deg);
      z-index: 0;
      opacity: 0.13;
    }
  }
  .title {
    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    margin-bottom: 20px;
  }
  .user {
    background-image: -webkit-linear-gradient(-90deg, #2559ea 0%, #c669f8 100%);
    background-image: linear-gradient(-90deg, #2559ea 0%, #c669f8 100%);
  }
  .app {
    background-image: -webkit-linear-gradient(-90deg, #ff5d77 0%, #f4cb61 100%);
    background-image: linear-gradient(-90deg, #ff5d77 0%, #f4cb61 100%);
  }
  .channel {
    background: -webkit-linear-gradient(-90deg, #50b897, #9cd15f);
    background: linear-gradient(-90deg, #50b897, #9cd15f);
  }
  .release {
    background: -webkit-linear-gradient(-90deg, #2f9aff, #6063ff);
    background: linear-gradient(-90deg, #2f9aff, #6063ff);
  }
}
</style>